//模板层
<template>
    <div>

        <table border="1" bordercolor="#FDAE18" cellspacing="0" cellpadding="" width="500" height="00">
            <tr>
                <th>序号</th>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>购买数量</th>
                <th>操作</th>
            </tr>

            <tr v-for="(item,index) in glist" :key='index'>
                <td>{{ index+1 }}</td>
                <td>{{ item.goods }}</td>
                <td>{{ item.price}}</td>
                <td> <button @click="down_goods(index)"> - </button>{{ item.amount}} <button @click="add_goods(index)"> + </button></td>
                <td> <button @click="remove(index)">{{ item.oper}}</button></td>
            </tr>

            <tr  >
                <td colspan="5">总价 $  {{ totals }}</td>
            </tr>
        </table>



        <br>
        <br>
        <br>

        <div>{{ 1 | myfilter}}</div>

        <br>

        <button @click="conter++">点我</button>
        {{ conter }}

        <br>
        <br>


        {{ rever_msg }}


        <ul>
            <li v-for="(item,index) in tlist" :key='index' :class="{on:index%2==0,off:index&2!=0}">
                {{ index+1 }} {{ item.key }}
            </li>
        </ul>



        {{ msg }}

        <!-- html 也可以显示 -->
        <div v-html='msg'></div>

        <!-- V-show为true显示  反之 隐藏 -->
        <div v-show="ok">显示</div>


        <div v-if="type == 'A'">
            A
        </div>
        <div v-else-if="type == 'B'">
            B
        </div>
        <div v-else>
            C
        </div>




    </div>
</template>


//逻辑层
<script>
export default {
    //数据定义
    data(){
       return{
            msg:'你好，这是一个变量',
            ok:false,
            type:'A',
            tlist:[{'key':'汽车'},{'key':'面包'},{'key':'手机'}],
            conter:0,
            glist:[{'goods':'iphone 8','price':5099,'amount':1,'oper':'移除'},{'goods':'iphone xs','price':8699,'amount':1,'oper':'移除'},{'goods':'iphone xr','price':6499,'amount':1,'oper':'移除'}],
            

       }
    },
    //过滤器
    filters:{

        myfilter:function(value){
            if(value==1){
                return '已支付'
            }else{
                return '未支付'
            }
        }

    },

    //监听属性  ,对于一个变量的市是监控
    watch:{
        conter:function(nval,oval){
            console.log('计算器的变化：' +oval+'变成了'+nval)
        }
    },



    //计算属性   在不改变代码的情况下，做美化
    computed:{
        rever_msg:function(){
            return this.msg.split('').reverse().join('')
        },

        totals:function(){
           var total = 0
           for(var i=0;i<this.glist.length;i++){
               total += this.glist[i]['price'] * this.glist[i]['amount']
           }
           return total
        }

        

        //  let total = 0,i;
        //         for(i = 0; i < this.glist.length; i++){
        //             let item = this.glist[i]
        //             let price = item['price'] * item['amount']
        //             total += price
        //         }
        //         return total

        
    },



    //初始化方法钩子方法
    mounted:function(){
        
    },


    //常用方法，自定义方法
    methods:{
        add_goods(index){
            // console.log(this.glist[index].amount)
            this.glist[index]['amount'] += 1
        },

        down_goods(index){
            // console.log(this.glist[index].amount)
            if(this.glist[index]['amount']>1){
                this.glist[index]['amount'] -= 1
            }else{
                this.glist[index]['amount'] = 1
            }
            
        },

        remove(index){
            this.glist[index]['amount'] = 1
           
        }

    }



}







</script>



//样式层
<style>
    .on{background: blue}
    .off{background: blueviolet}


</style>


